<template>
	<view>
		<view class="article-wrap">
			<view v-for="(item,index) in detailData" :key="index">
				<view class="article-wrap-heard">
					<view class="article-wrap-avalter">
						<image :src="item.userinfoData[0].avatarUrl" mode=""></image>
						<text>{{item.userinfoData[0].nickName}}</text>
					</view>
					<!-- <view class="article-wrap-guanzhu">关注</view> -->
				</view>
				<view class="article-wrap-text">
					<text>{{item.textarea}}</text>
					<view class="article-wrap-text-img">
						<block v-for="(items,indexs) in item.uploadImg" :key="indexs">
							<image :src="items" mode="aspectFill" @click="picturesLook(indexs,item.uploadImg)" ></image>
						</block>
					</view>
				</view>
				<view class="article-wrap-time">
					<text>发表时间：{{item.time}}</text>
				</view>
			</view>
		</view>
		<!-- 赞 -->
		<zan :commIds="commIds" :mylikesx="mylikesx"></zan>
		
		<!-- 评论 -->
		<pinglun :usersCommentArr="usersCommentArr"></pinglun>
		
		<!-- 反馈组件 -->
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>

		
	</view>
</template>

<script>
	//预览模块
	import packmages from '../../components/images.js'
	
	import pinglun from './components/pinglun.vue'
	import zan from './components/zan.vue'
	
	//引入vuex仓库中的值
	import {mapState} from 'vuex';
	
	//顶部消息提示插件
	 import HMmessages from "@/HMtolel/HM-messages/HM-messages.vue"
	
	export default {
		data() {
			return {
				detailData:[], //详情内容
				usersCommentArr:[] ,//详情评论
				commIds:'',
				usersZantArr:[],
				mylikesx:'0'
			}
		},
		components:{
			pinglun,
			zan,
			HMmessages
		},
		methods: {
			//通过id渲染数据
			getdatail(id){
				const db = wx.cloud.database()
				db.collection('textarea').where({
					_id:id
				}).get().then(res=>{
					// console.log(res.data)
					if(res.data.length==0){
						this.HMmessages.show("该帖子已经删除！",{icon:'error',fontColor:'#000000',background:'#ffff00',iconColor:'#000000'})

					}else{
						this.detailData = res.data
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			
			//图片预览
			picturesLook(index,item){
				packmages(index,item).then(res=>{
					// console.log(res)
				}).catch(err=>{
					console.log(err)
				})
			},
			
			
			//请求数据评论
			qqiuCommen(){
				// 请求评论数据
				let commIdss = this.commIds
				const db = wx.cloud.database()
				db.collection('comment').where({
					commId:commIdss
				}).get().then(res=>{
					// console.log(res.data)
					this.usersCommentArr = res.data
				}).catch(err=>{
					console.log(err)
				})
			},
			
			
			//请求渲染
			getZanX(){
				let zanIds = this.commIds
				// console.log('123',zanIds)
				const db = wx.cloud.database().collection('textarea').where({
					_id: zanIds
				}).get().then(res=>{
					// console.log(res)
					this.mylikesx = res.data[0].likes
					let mylikes = res.data[0].likes
					//传给仓库
					this.$store.commit('likes',mylikes)
				}).catch(err=>{
					console.log(err)
				})
			},
			
		},
		onLoad(e) {
			this.getdatail(e.id)
			let ids = e.id
			this.$store.commit('commentsId',ids)
			this.commIds = e.id
			
			//初始化评论
			this.qqiuCommen()
			this.getZanX()
			
		},
		
		computed:{
			...mapState(['roturn','zanSs']),
			//自定一个函数接受仓库中的数据
			count(){
				// console.log(this.roturn.pagesising)
				
				if(this.roturn.pagesising == true){
					//刷新评论
					this.qqiuCommen()
				}
				//刷新点赞
				if(this.zanSs.zanSsing==false){
					this.getZanX()
				}
			},
			
		},
	}
</script>

<style lang="scss">
.article-wrap {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 20upx;
		box-sizing: border-box;
		margin-bottom: 20upx;

		.article-wrap-heard {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.article-wrap-avalter {
				display: flex;
				justify-content: start;
				align-items: center;
				padding: 10upx 20upx 20upx 1upx;

				image {
					width: 70upx;
					height: 70upx;
					border-radius: 50%;
					margin-right: 20upx;
				}

				text {
					color: #505050;
					font-size: 35upx;
					font-weight: bold;
				}
			}

			.article-wrap-guanzhu {
				padding: 10upx 30upx;
				background-color: #5500ff;
				border-radius: 40upx;
				color: #ffffff;
				box-shadow: 0upx 0upx 20upx rgba(0, 170, 255, 0.4);
			}

		}

		.article-wrap-text {
			padding: 2upx 15upx;

			text {
				font-family: "微软雅黑";
				font-size: 34upx;
				color: #161616;
			}

			.article-wrap-text-img {
				display: flex;
				justify-content: start;
				flex-wrap: wrap;

				image {
					width: 338upx;
					height: 338upx;
					padding: 20upx 25upx 5upx 0;
					box-sizing: border-box;
				}
			}
		}

		.article-wrap-time {
			margin: 20upx;

			text {
				font-size: 28upx;
				color: #666666;
			}
		}
	}

</style>
